<template>
        <div class="routineset" v-loading="state.loading">
            <el-card>
                <template #header>
                    <div class="card-header clearfix">
                        <span class="headerTitle">{{router.currentRoute.value.meta.title}}</span>
                        <div class="floatRight">
                            <el-button type="primary" v-if="isAuthBtn('add')" ><i class="fa fa-send"></i>Btn</el-button>
                        </div>
                    </div>
                </template>
                <el-tabs v-model="state.tabOne" @tab-change="tabOneChange('one')">
                    <div v-for="item,index in state.tabList" :key="item.id" >
                        <el-tab-pane :label="item.title" :name="index" v-if="item.children.length>0" >
                            <el-tabs v-model="state.tabTow" type="card" @tab-click="tabTowChange">
                                <el-tab-pane :label="it.title" :name="ind" v-for="it,ind in item.children" :key="it.id"></el-tab-pane>
                            </el-tabs>
                        </el-tab-pane>
                    </div>
                </el-tabs>
                <!-- 循环表单 -->
                <el-form :model="state.dataList" label-width="180px" ref="setDataRef">
                    <template v-for="item,index in state.dataList" :key="item.id">
                        <el-form-item  :prop="item.fields+'.value'" :rules="formRulesFun(item)" v-if="item.if?state.dataList[item.if.if].value==item.if.ifv:true" >
                            <template #label>
                                <div  v-if="item.desc">
                                    {{item.title}}
                                    <el-tooltip placement="top" >
                                        <template #content>
                                            <div style="max-width:200px;">
                                                {{item.desc}}
                                             </div>
                                        </template>
                                        <i class="fa fa-question-circle"></i>
                                    </el-tooltip>
                                </div>
                                <div v-else>
                                    {{item.title}}
                                </div>
                            </template>
                            <div class="formItem" v-if="item.type=='text'">
                                <div v-if="item.input_type=='input'">
                                    <el-input v-model="state.dataList[item.fields].value"  />
                                </div>
                                <div v-if="item.input_type=='number'">
                                    <el-input-number v-model="state.dataList[item.fields].value"  />
                                </div>
                                <div v-if="item.input_type=='time'">
                                    <el-time-picker
                                        v-model="state.dataList[item.fields].value"
                                        arrow-control
                                    />
                                </div>
                                <div v-if="item.input_type=='color'">
                                    <el-color-picker v-model="state.dataList[item.fields].value" show-alpha />
                                </div>
                            </div>
                            <div class="formItem" v-if="item.type=='textarea'">
                                <el-input
                                    v-model="state.dataList[item.fields].value" 
                                    :rows="item.high"
                                    type="textarea"
                                />
                            </div>
                            <div class="formItem" v-if="item.type=='rich'">
                                <Editor v-if="item.type=='rich'" v-model:get-html="state.dataList[item.fields].value"/>
                            </div>
                            <div class="formItem" v-if="item.type=='radio'">
                                <el-select
                                    v-model="state.dataList[item.fields].value"
                                    placeholder="Select"
                                    style="width: 240px"
                                    >
                                    <el-option
                                        v-for="it,int in item.parameterList" :key="int" :label="it" :value="int"
                                    />
                                </el-select>
                            </div>
                            <div class="formItem" v-if="item.type=='checkbox'">
                                <el-select
                                    v-model="state.dataList[item.fields].value"
                                    multiple
                                    placeholder="Select"
                                    style="width: 240px"
                                    >
                                    <el-option
                                        v-for="it,int in item.parameterList" :key="int" :label="it" :value="int"
                                    />
                                </el-select>
                            </div>
                            <div class="formItem" v-if="item.type=='upload'">
                                <div v-if="item.input_type=='image'">
                                    <div v-if="item.upload_type=='1'">
                                        <div class="selectImg">
                                            <el-image style="width: 100%;height: 100%;" fit="cover" :src="state.dataList[item.fields].value">
                                                <template #error>
                                                    <div style="line-height: 150px;text-align: center;">
                                                        暂无图片
                                                    </div>
                                                </template>
                                            </el-image>
                                            <div class="imgBtn">
                                                <i class="fa fa-eye" v-if="state.dataList[item.fields].value"  @click="selectImgBtn('eye',item)"></i>
                                                <i class="fa fa-trash-o selectDel" v-if="state.dataList[item.fields].value"  @click="selectImgBtn('del',item)"></i>
                                                <i class="fa fa-file-image-o" v-if="!state.dataList[item.fields].value" @click="selectImgBtn('select',item)"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="item.upload_type=='2'">
                                        <div class="imgItem">
                                            <draggable item-key="index" :list="state.dataList[item.fields].value" animation="300" >
                                                <template #item="{ element }">
                                                    <div class="selectImg">
                                                        <el-image style="width: 100%;height: 100%;" fit="cover" :src="element">
                                                            <template #error>
                                                                <div style="line-height: 150px;text-align: center;">
                                                                    暂无图片
                                                                </div>
                                                            </template>
                                                        </el-image>
                                                        <div class="imgBtn">
                                                            <i class="fa fa-eye" v-if="state.dataList[item.fields].value"  @click="selectImgBtn('eye',item,element)"></i>
                                                            <i class="fa fa-trash-o selectDel" v-if="state.dataList[item.fields].value"  @click="selectImgBtn('del',item,element)"></i>
                                                        </div>
                                                    </div>
                                                </template>
                                            </draggable>
                                        </div>
                                        <div class="imgItem">
                                            <div class="k-col-center k-row-center" style="padding:20px;display:flex;height: 150px;">
                                                <!-- <i class="fa fa-file-image-o"  @click="selectImgBtn('select',item)"></i> -->
                                                <el-button type="primary" plain @click="selectImgBtn('select',item)">选择图片</el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="formItem" v-if="item.type=='json'"> 
                                <el-row :gutter="20" v-for="it,int in state.dataList[item.fields].value" :key="int">
                                    <el-col :span="parseInt(20/Object.values(item.parameterList).length)" v-for="im,i in item.parameterList" :key="i">
                                        <el-input v-model="state.dataList[item.fields].value[int][i]" :placeholder="im" />
                                    </el-col>
                                    <el-col :span="4">
                                        <el-button type="success" @click="jsonBtn('add',item)" circle v-if="int==0"><i class="oneIcon fa fa-plus"></i></el-button>
                                        <el-button type="primary" @click="jsonBtn('move',item,int,int+1)" circle v-if="(int+1)!=state.dataList[item.fields].value.length"><i class="oneIcon fa fa-angle-down"></i></el-button>
                                        <el-button type="warning" @click="jsonBtn('move',item,int,int-1)" circle v-if="int!=0"><i class="oneIcon fa fa-angle-up"></i></el-button>
                                        <el-button type="danger"  @click="jsonBtn('del',item,int)" circle><i class="oneIcon fa fa-trash"></i></el-button>
                                    </el-col>
                                </el-row>
                                <div v-if="!state.dataList[item.fields].value||state.dataList[item.fields].value.length<=0">
                                    <el-button type="success" @click="jsonBtn('add',item)" circle><i class="oneIcon fa fa-plus"></i></el-button>
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </el-form>
                <div class="caozuoBtnCss">
                    <el-button type="primary" v-loading="state.btnloading" @click="queding">确认</el-button>
                </div>
            </el-card>
            <!--图片弹窗-->
            <el-dialog
                v-model="state.selectImgShow"
                title="选择图片"
                center
                width="80%"
                append-to-body
            >
                <Accessory type="1" @select="imgSelectBtn" ></Accessory>
            </el-dialog>
            <el-dialog v-model="imageShow">
                <img style="width:100%;" :src="imageUrl" alt="Preview Image" />
            </el-dialog>
        </div>
    </template>
    
    <script lang="ts" setup name="routineset">
    import { toRefs,ref, reactive,onMounted, defineComponent,defineAsyncComponent } from 'vue';
    import { useRouter } from 'vue-router'
    import { ElNotification, ElMessage ,ElMessageBox ,FormRules,ElTree} from 'element-plus'
    import { systemApi } from '/@/api';
    import { isModification } from '/@/utils/kingmin';//去重
    import Editor from '/@/components/editor/index.vue';
    import draggable from 'vuedraggable' //拖拽
    const router = useRouter();
    // 引入组件
    const Accessory= defineAsyncComponent(() => import('/@/components/accessory/index.vue'));

    const setDataRef = ref()
    const imageUrl = ref('')
    const imageShow = ref(false)
    const state = reactive({
        roleBtn:router.currentRoute.value.meta.roleBtn,
        btnloading:false,
        loading:true,
        dataList:[],
        pages: {
            isAll: false,
            pageCount: 0,
            pageSize: 10,
            recordCount: 0,
            pno: 1
          },
        tabList:[],
        tabOne:0,
        tabTow:0,
        selectImgShow:false,
        selectType:"",
        drag:false
    });
    const queding=()=>{
        setDataRef.value.validate((valid) => {
            if (valid) {
                state.btnloading=true;
                let dt=isModification(state.dataList,state.originalData);
                if(Object.values(dt).length>0){

				}else{
					ElMessage({message:'没有要修改的数据',type:"warning"});
					state.dtShow=false;
					state.btnloading=false;
					return false;
				}
				// console.log(dt)
				upDataFun(dt);
                
            }
        })
    }
    const upDataFun=(dt:object)=>{
        if(!dt){
            ElMessage.error('修改的数据为空');
            return false;
        }
        systemApi('upConfigDetail',dt).then(res=>{
            // console.log(res)
            ElMessage({message:res.msg?res.msg:"操作成功",type:"success"});
            // state.dtShow=false;
            state.btnloading=false;
            // getMemberList(state.pages.pno);
        })
        .catch(res=>{
            if(res.code!=450000){
                ElMessageBox.confirm(res.msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {})
                .catch(() => {});
                state.btnloading=false;
            }
        })
    }
    const selectImgBtn=(e:string,item:object,i:number)=>{
        state.selectType=item;
        if(e=="eye"){
            if(i){
                imageUrl.value = state.dataList[state.selectType.fields].value[state.dataList[state.selectType.fields].value.indexOf(i)]
            }else{
                imageUrl.value = state.dataList[state.selectType.fields].value
            }
            imageShow.value = true
        }
        if(e=="del"){
            if(i){
                let d=[];
                for(let j in state.dataList[state.selectType.fields].value){
                    if(state.dataList[state.selectType.fields].value[j]!=i){
                        d.push(state.dataList[state.selectType.fields].value[j]);
                    }
                }
                state.dataList[state.selectType.fields].value=d;
            }else{
                state.dataList[state.selectType.fields].value="";
            }
        }
        if(e=="select"){
            state.selectImgShow=true;
        }
    };
    const imgShowBtn=(e:string)=>{
        state.selectType=e;
        state.selectImgShow=true;
    }
    const jsonBtn=(e:string,item:object,i:number,i2:number)=>{
        if(e=='add'){
            let a={};
            for(let k in item.parameterList){
                a[k]="";
            }
            state.dataList[item.fields].value.push(a);
        }
        if(e=='del'){
            state.dataList[item.fields].value.splice(i, 1);
        }
        if(e=='move'){
            state.dataList[item.fields].value[i]=state.dataList[item.fields].value.splice(
            i2,
            1,
            state.dataList[item.fields].value[i]
            )[0]
        }
    }
    const imgSelectBtn = (item) => {
        for(let p of item){
            if(state.selectType.upload_type=='1'){
                state.dataList[state.selectType.fields].value=p.url;
            }else{
                state.dataList[state.selectType.fields].value.push(p.url);
            }
        }
        quxiaoSelectBtn('img');
    };
    const quxiaoSelectBtn = (item) => {
        if(item=='img'){
            state.selectType="";
            state.selectImgShow=false;
        }
        
    };
    const formIfFun=(item:object)=>{
        let rt=true;
        if(item.if){
            rt=state.dataList[item.if.if].value==item.if.ifv
        }
        return rt;
    }
    const formRulesFun=(item:object)=>{
        let rules=[];
        // console.log(item)
        if(item.required){
            for(let p of item.requiredList){
                if(p.required){
                    rules.push({
                      required: true,
                      message: `请填写${item.title}`,
                      trigger: 'blur',
                    });
                }
            }
        }
        return  rules;
    }
    const tabOneChange=(e:string)=>{
        if(e=='one'){
            state.tabTow=0;
        }
        getConfigData();
    }
    const tabTowChange=(e)=>{
        state.tabTow=e.paneName;
        getConfigData();
    }
    // 获取系统设置分类
    const getConfigTab=()=>{
        systemApi('configTab?exploit=1',{}).then((res)=>{
            state.tabList=res;
            
            getConfigData();

        })
    }
    // 获取系统设置
    const getConfigData = (e:string) => {
        let id=0;
		if(e){
            id=e;
        }else{
            id=state.tabList[state.tabOne].children[state.tabTow].id;
        }
		systemApi('configData?id='+id).then((res)=>{
            state.dataList=res;
            state.originalData=JSON.parse(JSON.stringify(res));
			state.loading=false;
		}).catch((res) => {
			// console.log(res)
			state.loading=false;
		});
    };
    // 权限判断
    const isAuthBtn = (e) => {
        let auth=false;
        if(e){
            for(let p of state.roleBtn){
                if(p==e){
                    auth=true;
                }
            }
        }
        return auth;
    };
    // 跳转
    const tourl = (e) => {
        router.push(e);
    };
    
    onMounted(()=>{
          // 获取当前路由实例参数
        //   console.dir(router.currentRoute.value.query.id);
        //   console.dir(router.currentRoute.value.meta.roleBtn);
          if(!isAuthBtn('index')){
              router.push('/401');
          }else{
			  //操作函数
			  getConfigTab();
              
          }
    })
    </script>
    
    <style scoped lang="scss">
        .routineset{
            padding:5px;
            .formItem{
                width: 100%;
            }
            .imgItem{
                display: inline-block;
                vertical-align: bottom;
            }
            .el-row {
                margin-bottom: 20px;
            }
            .caozuoBtnCss{
                margin-top:20px;
                padding-left:50px;
            }
        }
    </style>
    